<template>
   <div class="app-container">
      <div class="top-page">
         <div class="tit-bar">
            <div class="tit">竞拍活动0-1CNY营销</div>
            <div class="sub-tit">拍卖活动活动描述字段，拍卖活动活动描述字</div>
         </div>
         <div style="flex: 1;"></div>
         <div class="btn">
            <span style="margin-bottom: 5px;">当前场次</span>
            <span>Competitive Commodit</span>
         </div>
         <div class="cut-line"></div>
         <div class="time-tit">剩余<br>时间</div>
         <div class="countdown-bar">
            <el-countdown
            format="HH:mm:ss"
            :value="value1"
            :value-style="{color: '#fff'}"
            />
         </div>
      </div>
      <el-divider />
      <div class="table-bar">
         <div class="table-tit">活动产品</div>
         <div class="cut"></div>
      </div>
      
      <el-table v-loading="loading" :data="typeList">
         <el-table-column type="expand">
            <template #default="props">
                <el-row :gutter="20">
                  <el-col :span="12">
                     <el-table :data="props.row.family" max-height="300px">
                        <el-table-column label="供应商" prop="name1" show-overflow-tooltip  />
                        <el-table-column label="出价时间" prop="name2" />
                        <el-table-column label="需求数量" prop="name3" width="80px" />
                        <el-table-column label="出价金额" prop="name4">
                           <template #default="scope">
                              <div class="green-txt">{{scope.row.name4}}</div>
                           </template>
                        </el-table-column>
                      </el-table>
                  </el-col>
                  <el-col :span="12">
                     <div class="table-panel">
                        <div class="top">
                           <div class="tit">新西兰进口 ps级 天然草饲 牛尾骨</div>
                           <div class="btn">正在竞拍</div>
                        </div>
                        <el-divider border-style="dashed" />
                        <div class="cont">
                           <div class="left">
                              <div class="box1" style="margin-bottom: 16px;">
                                 <span>最高出价</span>
                                 <div class="rmb green">RMB 580</div>
                              </div>
                              <div class="box1">
                                 <span>最高出价</span>
                                 <div class="rmb">RMB 10,000</div>
                              </div>
                           </div>
                           <div class="right">
                              <div class="left-wraper">
                                 <div class="item" style="border-bottom: 1px solid #DADBDA;">
                                    <span>我的当前出价</span>
                                    <div class="rmb">货量{{props.row.value10}}箱</div>
                                 </div>
                                 <div class="item" >
                                    <span>单价</span>
                                    <div class="rmb">{{props.row.value11}}元/箱</div>
                                 </div>
                              </div>
                              <div class="right-cont">
                                 <div class="label-tit">需求数量</div>
                                 <el-input
                                    v-model="props.row.value10"
                                    placeholder=""
                                    clearable
                                    style="width: 180px;"
                                    
                                 />
                                 <div class="label-tit">价格</div>
                                 <el-input
                                    v-model="props.row.value11"
                                    placeholder=""
                                    clearable
                                    style="width: 180px;"
                                 />
                                 <el-button type="primary" style="width: 180px;margin-top: 20px;">出价</el-button>
                              </div>
                           </div>
                        </div>
                     </div>

                  </el-col>
                </el-row>
            </template>
          </el-table-column>
         <el-table-column label="序号" type="index" width="55" align="center" />
         <el-table-column label="SKU CODE" min-width="120px" align="center" prop="name1" />
         <el-table-column label="货品名称" min-width="150px" align="center" show-overflow-tooltip  prop="name2" />
         <el-table-column label="部位" align="center" prop="name3"/>
         <el-table-column label="货量" width="130px" align="center" prop="name4"/>
         <el-table-column label="起拍价" width="130px" align="center" prop="name5"/>
         <el-table-column label="最小加价" width="130px" align="center" prop="name6"/>
         <el-table-column label="最小货量" width="130px" align="center" prop="name7"/>
         
         
      </el-table>

   </div>
</template>

<script setup name="Dict">
import useDictStore from '@/store/modules/dict'
import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";

const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

const value1 = ref(Date.now() + 100 * 60 * 60 * 24 * 2)
const typeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    dictName: undefined,
    dictType: undefined,
    status: undefined
  },
  rules: {
    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
  },
  
});

const { queryParams, form, rules } = toRefs(data);


/** 查询字典类型列表 */
function getList() {
  loading.value = true;
  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {

    typeList.value = response.rows;
    typeList.value = typeList.value.map((item, index)=>{
      return {
         name1: 'SKU2023110000' + index,
         name2: '新西兰进口 ps级 天然草饲 牛尾骨',
         name3: '尾骨',
         name4: '300箱',
         name5: '500元/箱',
         name6: 'RMB 100',
         name7: '10箱',
         value10: '10',
         value11: '30',
         family: [
            {
               name1: '上海有机食品有限公司',
               name2: '23.11.04 at 18:23:17',
               name3: '50箱',
               name4: 'RMB 520',
            },
            {
               name1: '上海有机食品有限公司',
               name2: '23.11.04 at 18:23:17',
               name3: '50箱',
               name4: 'RMB 520',
               value10: '10',
               value11: '30',
            },
            {
               name1: '上海有机食品有限公司',
               name2: '23.11.04 at 18:23:17',
               name3: '50箱',
               name4: 'RMB 520',
               value10: '10',
               value11: '30',
            },
            {
               name1: '上海有机食品有限公司',
               name2: '23.11.04 at 18:23:17',
               name3: '50箱',
               name4: 'RMB 520',
               value10: '10',
               value11: '30',
            },
            {
               name1: '上海有机食品有限公司',
               name2: '23.11.04 at 18:23:17',
               name3: '50箱',
               name4: 'RMB 520',
               value10: '10',
               value11: '30',
            },
            {
               name1: '上海有机食品有限公司',
               name2: '23.11.04 at 18:23:17',
               name3: '50箱',
               name4: 'RMB 520',
               value10: '10',
               value11: '30',
            },
            
         ],
      }
    })
    total.value = response.total;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    dictId: undefined,
    dictName: undefined,
    dictType: undefined,
    status: "0",
    remark: undefined
  };
  proxy.resetForm("dictRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加字典类型";
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.dictId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const dictId = row.dictId || ids.value;
  getType(dictId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改字典类型";
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["dictRef"].validate(valid => {
    if (valid) {
      if (form.value.dictId != undefined) {
        updateType(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addType(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  const dictIds = row.dictId || ids.value;
  proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
    return delType(dictIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/dict/type/export", {
    ...queryParams.value
  }, `dict_${new Date().getTime()}.xlsx`);
}
/** 刷新缓存按钮操作 */
function handleRefreshCache() {
  refreshCache().then(() => {
    proxy.$modal.msgSuccess("刷新成功");
    useDictStore().cleanDict();
  });
}

getList();
</script>

<style lang="scss">
.top-page{
   display: flex;
   justify-content: space-between;
   align-items: center;
   .tit-bar{
      .tit{
         font-size: 20px;
         margin-bottom: 10px;
         font-weight: 700;
      }
      .sub-tit{
         font-size: 14px;
         color: #3E3E3E;
      }
   }
   .btn{
      width: 196px;
      height: 56px;
      background: #000000;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
   }
   .cut-line{
      width: 1px;
      height: 57px;
      background: #000000;
      margin: 0 20px;
   }
   .time-tit{
      font-size: 16px;
      color: #000000;
      margin-right: 15px;
   }
   .countdown-bar{
      width: 100px;
      height: 56px;
      background: #000000;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
   }
}
.table-bar{
   display: flex;
   align-items: center;
   margin-bottom: 15px;
   .table-tit{
      font-weight: 700;
   }
   .cut{
      flex: 1;
   }
}

.table-panel{
   padding: 20px;
   .top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tit{
         font-size: 18px;
         font-weight: 600;
         color: #000;
      }
      .btn{
         width: 96px;
         height: 32px;
         background: #0B8C49;
         color: #fff;
         line-height: 32px;
         text-align: center;
      }
   }
   
   .cont{
      display: flex;
      .left{
         font-size: 12px;
         color: #3E3E3E;
         margin-right: 24px;
         .box1{
            width: 220px;
            height: 96px;
            background: #FFFFFF;
            border: 1px solid #DADBDA;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .rmb{
               font-size: 18px;
               font-weight: 500;
               color: #000000;
               margin-top: 10px;
            }
            .green{
               color: #0B8C49;
            }
         }
      }
      .right{
         flex: 1;
         height: 208px;
         background: #E8E9E8;
         display: flex;
         .left-wraper{
            width: 50%;
            border-right: 1px solid #DADBDA;
            .item{
               
               height: 105px;
               display: flex;
               justify-content: center;
               align-items: center;
               flex-direction: column;
               .rmb{
                  font-size: 18px;
                  font-weight: 500;
                  color: #000000;
                  margin-top: 10px;
               }
            }
         }
         .right-cont{
            width: 50%;
            padding: 10px;
            .label-tit{
               font-size: 14px;
               color: #000;
               margin: 10px 0;
            }
         }
      }
   }
}
</style>
